<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Insert title here</title>
	<link rel="stylesheet" type="text/css" href="../css1/bootstrap.min.css"/>
	<script src="../js1/jquery.min.js"></script>
	<script src="../js1/bootstrap.min.js"></script>
	<style>
		iframe{
			width: 800px;
		}
		.panel-group.table-responsive a{
			width: 180px;
		}
		button{
		    display: inline-block;
		}
	</style>
	
	<script>
		$(function(){
			$('#ul1 li').click(function(){
				$(this).addClass('active').siblings().removeClass('active');
			})
		})		
	</script>
</head>
<body style="margin: 20px; margin-bottom: 60px;">			
	<div>
		<center>
			<!-- 主体 -->
			<div class="logo">
				
					<ul id="ul1" class="nav nav-pills nav-justified " style="background-color: powderblue;">
						<li class="active"><a href="dept.jsp">部门信息</a></li>
						<li><a href="adddept.jsp">部门添加</a></li>
					</ul>
					<br>
					<hr >
				
			</div>
			<div class="container-fluid">   
			 
				<div class="row main">
					<!-- 查询部门信息列表 -->
					<div>
						<label>查询部门信息列表</label><br />
						<input type="text" placeholder="请输入想要查询的部门编号" />
						<input type="text" placeholder="请输入想要查询的部门名称" />
						<button id="selectDeptInfo" class="btn btn-info">查询</button>
						
						<!-- 默认部门列表 -->
						<table class="table table-hover">
							<tr>
								<td>部门编号</td><td>部门名称</td><td>部门经理姓名</td>
							</tr>
							<tr>
								<td>001</td><td>销售部</td><td>张龙</td>
							</tr>
							<tr>
								<td>002</td><td>武装部</td><td>赵虎</td>
							</tr>
							<tr>
								<td>003</td><td>技术部</td><td>王朝</td>
							</tr>
							<tr>
								<td>004</td><td>后勤部</td><td>马汉</td>
							</tr>
						</table>
					</div>
					<br />
					<!-- 选项列表 -->
					<div id="xuanXiangList">
						<label>查询部门下属员工</label><br />
						<input type="text" placeholder="请输入想要查询的员工编号" />
						<input type="text" placeholder="请输入想要查询的员工姓名" />
						<button id="selectEmployee" class="btn btn-info">查询</button>
						<br />
						<button id="createDept" class="btn btn-info">新建部门</button>
						<button id="modifyDept" class="btn btn-info">修改部门信息</button>
						<button id="delDept" class="btn btn-info">删除部门</button>
					</div>
					
					<!-- 部门下属员工信息表 -->
					<div id="employeeTable">
						<table class="table table-hover">
							<tr>
								<td>员工编号</td><td>员工姓名</td><td>入职日期</td><td>职业生涯</td>
							</tr>
							<tr>
								<td>001</td><td>张三</td><td>19860121</td><td>建筑师</td>
							</tr>
							<tr>
								<td>002</td><td>李四</td><td>19920324</td><td>教师</td>
							</tr>
							<tr>
								<td>003</td><td>王五</td><td>19731130</td><td>军人</td>
							</tr>
							<tr>
								<td>004</td><td>赵六</td><td>19860121</td><td>司机</td>
							</tr>
						</table>
					</div>
					<br />
				</div>
			</center>
			</div>
		</div>					
	</div>
			<!-- 主体 -->
</body>
</html>